<template>
  <div class="home-search">
    <div class="home-title">自定义视图</div>
    <div class="home-content">
      <div class="home-item">
        <span>视图名称</span>
        <a-input v-model="from.viewName"></a-input>
      </div>
      <div class="home-item">
        <span>创建时间</span>
        <a-range-picker
          separator="至"
          v-model="date"
          @change="onChange"
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          style="min-width: 200px"
          :disabled-date="disabledDate"
        />
      </div>
      <div class="home-item">
        <span>状态</span>
        <a-select v-model="from.state" style="min-width: 200px">
          <a-select-option
            v-for="(item, index) in options"
            :key="index"
            :value="item.value"
          >{{ item.label }}</a-select-option>
        </a-select>
      </div>
      <div class="home-item">
        <a-button type="primary" class="home-item-search" @click="handleSearch(false)">查询</a-button>
        <a-button class="home-item-reset" @click="handleSearch(true)">重置</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import Moment from 'moment';

import window from '@/mixins/window';

export default {
  name: 'Search',
  mixins: [
    window
  ],
  data () {
    return {
      disabledDate: current => current && current > Moment(),
      from: {
        viewName: '',
        beginTime: '',
        endTime: '',
        state: 0
      },
      date: [],
      options: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '已使用',
          value: 1
        },
        {
          label: '未使用',
          value: -1
        }
      ]
    }
  },
  mounted () {
    this.$emit('handleSearch', this.from)
  },
  methods: {
    onChange (e) {
      const [beginTime, endTime] = e
      this.from.beginTime = beginTime || ''
      this.from.endTime = endTime || ''
    },
    handleSearch (e) {
      if (e) {
        this.from = this.$options.data().from
        this.date = []
      }
      this.$emit('handleSearch', this.from)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/vars.less";
.home-search {
  width: 100%;
  background: @dark-color-2;
  .home-title {
    width: 100%;
    font-size: 16px;
    line-height: 48px;
    text-indent: 16px;
    border-bottom: 1px solid @dark-color-5;
    color: lighten(@dark-color, 100% - lightness(@dark-color));
  }
  .home-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    .home-item {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        margin-right: 8px;
        font-size: 14px;
        white-space: nowrap;
        color: lighten(@dark-color, 60% - lightness(@dark-color));
      }
      /deep/ .ant-calendar-range-picker-separator {
        color: lighten(@dark-color, 100% - lightness(@dark-color));
      }
      .home-item-search {
        margin-right: 12px;
        font-size: 12px;
      }
      .home-item-reset {
        font-size: 12px;
      }
    }
  }
}
</style>